<template>
  <el-container class="main_con" >
    <div class="list_con nomt nopt nopb">
      <el-tabs v-model="activeName" @tab-click="tabsClick">
        <el-tab-pane label="阿里云短信" name="aliSms">
          <div class="edit_con nopd">
            <div class="edit_content" style="margin-top:7px;">
              <el-form label-width="100px" ref="aliSmsForm"  class="edit_form">
                <el-form-item label="accessKeyId">
                  <el-input placeholder="阿里云短信accessKeyId" v-model="aliSms_obj.configuration.accessKeyId"></el-input>
                </el-form-item>
                <el-form-item label="accessSecret">
                  <el-input placeholder="阿里云短信accessSecret" v-model="aliSms_obj.configuration.accessSecret"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
   <!--     <el-tab-pane label="微信公众号" name="wx">
          <div class="edit_con nopd">
            <div class="edit_content" style="margin-top:7px;">
              <el-form label-width="100px" ref="wxForm"  class="edit_form">
                <el-form-item label="appid">
                  <el-input placeholder="微信公众号appid" v-model="wx_obj.configuration.appid"></el-input>
                </el-form-item>
                <el-form-item label="appsecret">
                  <el-input placeholder="微信公众号appsecret" v-model="wx_obj.configuration.appsecret"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="微信小程序" name="wxa">
          <div class="edit_con nopd">
            <div class="edit_content" style="margin-top:7px;">
              <el-form label-width="100px" ref="wxaForm"  class="edit_form">
                <el-form-item label="appid">
                  <el-input placeholder="微信小程序appid" v-model="wxa_obj.configuration.appid"></el-input>
                </el-form-item>
                <el-form-item label="appsecret">
                  <el-input placeholder="微信小程序appsecret" v-model="wxa_obj.configuration.appsecret"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <div class="edit_con">
      <div class="edit_footer nomt">
        <el-button type="primary" v-has @click="saveConfig">保存数据</el-button>
      </div>
    </div>
  </el-container>
</template> 
<script>
import {
  addSiteConfig,
  editSiteConfig,
  getSiteConfig
} from '@/api/mall/setting';
export default {
  data() {
    return {
      isLoading:false,
      activeName:'aliSms',
      aliSms_obj:{
        type:'aliSms',
        configuration:{
          accessKeyId:'',
          accessSecret:''
        }
      },
      wx_obj:{
        type:'wx',
        configuration:{
          appid:'',
          appsecret:''
        }
      },
      wxa_obj:{
        type:'wxa',
        configuration:{
          appid:'',
          appsecret:''
        }
      }
    }
  },
  mounted() {
    this.getSiteConfig(this.activeName);
  },
  methods: {
    //面板点击
    tabsClick(tab, event) {
      this.getSiteConfig(this.activeName);
    },
    //获取站点配置信息
    getSiteConfig(tp){
      this.isLoading = true;
      getSiteConfig(tp).then(res => {
        this.isLoading = false;
        if(res.msg){
          switch(tp){
            case 'aliSms':
              //阿里云短信接口设置
              this.aliSms_obj = Object.assign({},res.msg);
              break;
            case 'wx':
              //微信公众号配置
              this.wx_obj = Object.assign({},res.msg);
              break;
            case 'wxa':
              //微信小程序配置
              this.wxa_obj = Object.assign({},res.msg);
              break;
            default:
              //no code
              break;
          };
        };
        
      });
    },
    //保存当前tabs页面设置
    saveConfig(){
      switch(this.activeName){
        case 'aliSms':
          this.isLoading = true;
          //阿里云短信接口设置
          if(this.aliSms_obj.update_time){
            //修改
            editSiteConfig(this.aliSms_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig(this.activeName);
            });
          }else{
            //新增
            addSiteConfig(this.aliSms_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig(this.activeName);
            });
          };
          break;  
        case 'wx':
          this.isLoading = true;
          //微信公众号配置
          if(this.wx_obj.update_time){
            //修改
            editSiteConfig(this.wx_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig(this.activeName);
            });
          }else{
            //新增
            addSiteConfig(this.wx_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig(this.activeName);
            });
          };
          break;
        case 'wxa':
          this.isLoading = true;
          //微信小程序配置
          if(this.wxa_obj.update_time){
            //修改
            editSiteConfig(this.wxa_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig(this.activeName);
            });
          }else{
            //新增
            addSiteConfig(this.wxa_obj).then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getSiteConfig(this.activeName);
            });
          };
          break;
        default:
          this.$alert('接口功能待开发');
          break;
      };
    }
  }
}
</script>

<style lang="scss" scoped></style>